<template>
  <div class="vue-box">
    <div class="c-card full-height">
      <div class="margin-bottom"></div>
      <el-form :inline="false" label-width="10em" style="max-width: 700px;">
        <!-- 药店管理员角色 -->
        <template v-if="userInfo.RoleId == 'DrugstoreAdmin'">
          <in-input type="text" name="零售药店名称" v-model="form.fixmedins_name"></in-input>
          <in-input type="text" name="负责人姓名" v-model="form.Director"></in-input>
          <in-input type="num" name="负责人手机号" v-model="form.fixmedins_phone"></in-input>
          
          <el-form-item label="复核签名">
            <div class="aic">
              <el-image v-if="form.ReviewAccessoryUrl" class="sign-img" :src="form.ReviewAccessoryUrl" fit="contain"></el-image>
              <img class="sign-btn" src="../../assets/sign.png" alt="签名" @click="handleOpenReviewSign" />
            </div>
          </el-form-item>
          
          <el-form-item label="调配签名">
            <div class="aic">
              <el-image v-if="form.DeployAccessoryUrl" class="sign-img" :src="form.DeployAccessoryUrl" fit="contain"></el-image>
              <img class="sign-btn" src="../../assets/sign.png" alt="签名" @click="handleOpenDeploySign" />
            </div>
          </el-form-item>
        </template>
        
        <!-- 机构管理员角色 -->
        <template v-else-if="userInfo.RoleId == 'FixmedinsAdmin'">
          <in-input type="text" name="医疗机构名称" v-model="form.fixmedins_name"></in-input>
          <in-input type="text" name="负责人姓名" v-model="form.Director"></in-input>
          <in-input type="num" name="负责人手机号" v-model="form.fixmedins_phone"></in-input>
          <in-input type="text" name="药师姓名" v-model="form.PharmacistName"></in-input>
          <in-input type="text" name="药师编码" v-model="form.PharmacistCode"></in-input>
          
          <el-form-item label="药师签名">
            <div class="aic">
              <el-image v-if="form.PharmacistAccessoryId" class="sign-img" :src="form.PharmacistAccessoryUrl" fit="contain"></el-image>
              <img class="sign-btn" src="../../assets/sign.png" alt="签名" @click="handleOpenPharmacistSign" />
            </div>
          </el-form-item>
        </template>
        
        <el-form-item>
          <el-button class="margin-top-lg" type="primary" @click="saveUserInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <sign-dialog ref="signRef" :uploadType="uploadType" @saveSign="saveSign"></sign-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import signDialog from '@/components/sign-dialog/sign-dialog.vue';

const signRef = ref(null)
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const currentSignType = ref('') // 记录当前签名类型

// 上传类型映射
const uploadTypes = {
  review: '55',     // 复核签名
  deploy: '56',     // 调配签名
  pharmacist: '57'  // 药师签名
}

const uploadType = computed(() => {
  switch(currentSignType.value) {
    case 'review': return uploadTypes.review
    case 'deploy': return uploadTypes.deploy
    case 'pharmacist': return uploadTypes.pharmacist
    default: return '55'
  }
})

// 判断用户角色
const isPharmacyAdmin = computed(() => {
  return userStore.userInfo.role === '药店管理员' || userStore.userInfo.roleType === 'pharmacy'
})

const isInstitutionAdmin = computed(() => {
  return userStore.userInfo.role === '机构管理员' || userStore.userInfo.roleType === 'institution'
})

const form = reactive({
  // 药店管理员字段
  Director: userInfo.value.dr_name,
  fixmedins_phone: userInfo.value.dr_phone,
  ReviewAccessoryUrl: '',
  ReviewAccessoryId: '',
  DeployAccessoryUrl: '',
  DeployAccessoryId: '',
  
  // 机构管理员字段
  fixmedins_name: userInfo.value.fixmedins_name,
  fixmedins_code: userInfo.value.fixmedins_code,
  PharmacistName: '',
  PharmacistCode: '',
  PharmacistAccessoryId: '',
  PharmacistAccessoryUrl: '',
})

// 打开复核签名弹窗
function handleOpenReviewSign() {
  currentSignType.value = 'review'
  signRef.value?.open()
}

// 打开调配签名弹窗
function handleOpenDeploySign() {
  currentSignType.value = 'deploy'
  signRef.value?.open()
}

// 打开药师签名弹窗
function handleOpenPharmacistSign() {
  currentSignType.value = 'pharmacist'
  signRef.value?.open()
}
function handleClose() {
  signRef.value.close()
}

// 保存签名
function saveSign(id,keyname,url) {
  console.log('保存签名:', id,keyname,url)
  handleClose()
  if (!id) return
  
  switch(currentSignType.value) {
    case 'review':
      form.ReviewAccessoryUrl = url
      form.ReviewAccessoryId = id
      break
    case 'deploy':
      form.DeployAccessoryUrl = url
      form.DeployAccessoryId = id
      break
    case 'pharmacist':
      form.PharmacistAccessoryUrl = url
      form.PharmacistAccessoryId = id
      break
  }
}

// 保存用户信息
function saveUserInfo() {
  // 这里调用保存用户信息的接口
  console.log('保存用户信息:', form)
  sa.ajax('/api/webPresAdmin/setUserInfo', form, function(res) {
    if (res.code === 1) {
      sa.msg('保存成功')
      // 更新用户信息到store
      // userStore.updateUserInfo(form)
    } else {
      sa.msg(res.msg || '保存失败')
    }
  })
}

// 获取用户信息
function getUserInfo() {
  // 这里调用获取用户信息的接口
  sa.ajax('/api/webPresAdmin/queryUserInfo', {}, function(res) {
    if (res.code == 1) {
      Object.assign(form, res.data)
    }
  })
  
  // 临时使用用户store中的信息作为示例
  // const userInfo = userStore.userInfo
  // if (isPharmacyAdmin.value) {
  //   form.storename = userInfo.storename || ''
  //   form.Director = userInfo.Director || userInfo.name || ''
  //   form.fixmedins_phone = userInfo.fixmedins_phone || userInfo.phone || ''
  //   form.ReviewAccessoryUrl = userInfo.ReviewAccessoryUrl || ''
  //   form.ReviewAccessoryId = userInfo.ReviewAccessoryId || ''
  //   form.DeployAccessoryUrl = userInfo.DeployAccessoryUrl || ''
  //   form.DeployAccessoryId = userInfo.DeployAccessoryId || ''
  // } else if (isInstitutionAdmin.value) {
  //   form.fixmedins_name = userInfo.fixmedins_name || ''
  //   form.Director = userInfo.Director || userInfo.name || ''
  //   form.fixmedins_phone = userInfo.fixmedins_phone || userInfo.phone || ''
  //   form.PharmacistName = userInfo.PharmacistName || ''
  //   form.PharmacistCode = userInfo.PharmacistCode || ''
  //   form.PharmacistAccessoryId = userInfo.PharmacistAccessoryId || ''
  //   form.PharmacistAccessoryUrl = userInfo.PharmacistAccessoryUrl || ''
  // }
}

onMounted(() => {
  getUserInfo()
})
</script>

<style scoped lang="scss">
.full-height{
  height: calc(100% - 30px);
}
.sign-img {
  width: 100px;
  height: 60px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.sign-btn {
  width: 36px;
  height: 32px;
  margin-left: 50px;
  position: relative;
  top: 10px;
  cursor: pointer;
}
.aic {
  display: flex;
  align-items: center;
}
</style>